<template>
    <div class="wrap">
        <!-- 顶部结构 -->
        <div class="top">
            <div class="hosname">{{ workData.baseMap?.hosname }}</div>
            <div class="line"></div>
            <div>{{ workData.baseMap?.bigname }}</div>
            <div class="dot">.</div>
            <div class="hosdeparment">{{ workData.baseMap?.depname }}</div>
        </div>
        <!-- 中间展示日期的结构 -->
        <div class="center">
            <h1 class="time">{{ workData.baseMap?.workDateString }}</h1>
            <div class="container">
                <div @click="changeTime(item)" class="item"
                    :class="{ active: item.status == -1 || item.availableNumber == -1, cur: item.workDate == workTime.workDate }"
                    v-for="item in workData.bookingScheduleList" :key="item">
                    <div class="top1">{{ item.workDate }}-{{ item.dayOfWeek }}</div>
                    <div class="bottom">
                        <div v-if="item.status == -1">停止挂号</div>
                        <div v-if="item.status == 0">
                            {{ item.availableNumber == -1 ? '约满了' : `有号(${item.availableNumber})` }}
                        </div>
                        <div v-if="item.status == 1">即将放号</div>
                    </div>
                </div>
            </div>
            <el-pagination @current-change="fetchWorkData" v-model:current-page="pageNo" layout="prev, pager, next"
                :total="workData.total" />
        </div>
        <!-- 底部展示医生的结构 -->
        <div class="bottom">
            <!-- 展示即将放号的时间 -->
            <div class="will" v-if="workTime.status == 1">
                <span>2023</span>
                <span>放号</span>
            </div>
            <!-- 展示医生的结构：上午、下午 -->
            <div class="doctor" v-else>
                <div class="moring">
                    <!-- 顶部文字提示 -->
                    <div class="tip">
                        <svg t="1688363608856" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2600" width="32" height="32">
                            <path
                                d="M298.7 676.2l-52.3 52.3c-9.6 9.6-9.6 25.3 0 34.9 9.6 9.6 25.3 9.6 34.9 0l52.3-52.3c9.6-9.6 9.6-25.3 0-34.9-9.6-9.6-25.3-9.6-34.9 0z m-15-372.7c9.7 9.7 25.5 9.7 35.2 0 9.7-9.7 9.7-25.5 0-35.2l-52.8-52.8c-9.7-9.7-25.5-9.7-35.2 0-9.7 9.7-9.7 25.5 0 35.2l52.8 52.8z m-69.9 168.8h-74.7c-13.8 0-24.9 11.1-24.9 24.9 0 13.8 11.2 24.9 24.9 24.9h74.7c13.8 0 24.9-11.1 24.9-24.9 0-13.7-11.2-24.9-24.9-24.9z m298.8-249c13.8 0 24.9-11.1 24.9-24.9v-74.7c0-13.8-11.1-24.9-24.9-24.9s-24.9 11.1-24.9 24.9v74.7c0 13.8 11.2 24.9 24.9 24.9z m239.6 69.2l52.3-52.3c9.6-9.6 9.6-25.3 0-34.9-9.6-9.6-25.3-9.6-34.9 0l-52.3 52.3c-9.6 9.6-9.6 25.3 0 34.9 9.6 9.7 25.3 9.7 34.9 0z m133.9 179.8h-74.7c-13.8 0-24.9 11.1-24.9 24.9 0 13.8 11.1 24.9 24.9 24.9h74.7c13.8 0 24.9-11.1 24.9-24.9 0-13.7-11.1-24.9-24.9-24.9zM741.5 690.9c-9.7-9.7-25.5-9.7-35.2 0-9.7 9.7-9.7 25.5 0 35.2l52.8 52.8c9.7 9.7 25.5 9.7 35.2 0 9.7-9.7 9.7-25.5 0-35.2l-52.8-52.8zM512.6 273c-123.9 0-224.3 100.4-224.3 224.3s100.4 224.3 224.3 224.3 224.3-100.4 224.3-224.3S636.5 273 512.6 273z m0 498.1c-13.8 0-24.9 11.1-24.9 24.9v74.7c0 13.8 11.1 24.9 24.9 24.9s24.9-11.1 24.9-24.9V796c0-13.7-11.1-24.9-24.9-24.9z"
                                fill="#1296db" p-id="2601"></path>
                        </svg>
                        <span class="text">上午号源</span>
                    </div>
                    <!-- 医生信息 -->
                    <div class="doc_info" v-for="doctor in moringArr" :key="doctor.id">
                        <!-- 展示医生的名字|技能 -->
                        <div class="left">
                            <div class="info">
                                <span>{{ doctor.title }}</span>
                                <span>|</span>
                                <span>{{ doctor.docname }}</span>
                            </div>
                            <div class="skill">{{ doctor.skill }}</div>
                        </div>
                        <!-- 展示挂号的钱数 -->
                        <div class="right">
                            <div class="money">￥{{ doctor.amount }}</div>
                            <el-button type="primary" size="default" @click="goStep2(doctor)">{{ doctor.availableNumber
                            }}</el-button>
                        </div>
                    </div>
                </div>
                <div class="moring">
                    <!-- 顶部文字提示 -->
                    <div class="tip">
                        <svg t="1688363608856" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2600" width="32" height="32">
                            <path
                                d="M298.7 676.2l-52.3 52.3c-9.6 9.6-9.6 25.3 0 34.9 9.6 9.6 25.3 9.6 34.9 0l52.3-52.3c9.6-9.6 9.6-25.3 0-34.9-9.6-9.6-25.3-9.6-34.9 0z m-15-372.7c9.7 9.7 25.5 9.7 35.2 0 9.7-9.7 9.7-25.5 0-35.2l-52.8-52.8c-9.7-9.7-25.5-9.7-35.2 0-9.7 9.7-9.7 25.5 0 35.2l52.8 52.8z m-69.9 168.8h-74.7c-13.8 0-24.9 11.1-24.9 24.9 0 13.8 11.2 24.9 24.9 24.9h74.7c13.8 0 24.9-11.1 24.9-24.9 0-13.7-11.2-24.9-24.9-24.9z m298.8-249c13.8 0 24.9-11.1 24.9-24.9v-74.7c0-13.8-11.1-24.9-24.9-24.9s-24.9 11.1-24.9 24.9v74.7c0 13.8 11.2 24.9 24.9 24.9z m239.6 69.2l52.3-52.3c9.6-9.6 9.6-25.3 0-34.9-9.6-9.6-25.3-9.6-34.9 0l-52.3 52.3c-9.6 9.6-9.6 25.3 0 34.9 9.6 9.7 25.3 9.7 34.9 0z m133.9 179.8h-74.7c-13.8 0-24.9 11.1-24.9 24.9 0 13.8 11.1 24.9 24.9 24.9h74.7c13.8 0 24.9-11.1 24.9-24.9 0-13.7-11.1-24.9-24.9-24.9zM741.5 690.9c-9.7-9.7-25.5-9.7-35.2 0-9.7 9.7-9.7 25.5 0 35.2l52.8 52.8c9.7 9.7 25.5 9.7 35.2 0 9.7-9.7 9.7-25.5 0-35.2l-52.8-52.8zM512.6 273c-123.9 0-224.3 100.4-224.3 224.3s100.4 224.3 224.3 224.3 224.3-100.4 224.3-224.3S636.5 273 512.6 273z m0 498.1c-13.8 0-24.9 11.1-24.9 24.9v74.7c0 13.8 11.1 24.9 24.9 24.9s24.9-11.1 24.9-24.9V796c0-13.7-11.1-24.9-24.9-24.9z"
                                fill="#1296db" p-id="2601"></path>
                        </svg>
                        <span class="text">下午号源</span>
                    </div>
                    <!-- 医生信息 -->
                    <div class="doc_info" v-for="doctor in afterArr" :key="doctor.id">
                        <!-- 展示医生的名字|技能 -->
                        <div class="left">
                            <div class="info">
                                <span>{{ doctor.title }}</span>
                                <span>|</span>
                                <span>{{ doctor.docname }}</span>
                            </div>
                            <div class="skill">{{ doctor.skill }}</div>
                        </div>
                        <!-- 展示挂号的钱数 -->
                        <div class="right">
                            <div class="money">￥{{ doctor.amount }}</div>
                            <el-button type="primary" size="default" @click="goStep2(doctor)">{{ doctor.availableNumber
                            }}</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reqHospitalWork, reqHospitalDoctor } from '@/api/hospital/index'
import { onMounted, ref, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
let $route = useRoute()
let $router = useRouter()
let pageNo = ref(1)
let limit = ref(6)
// 存储医院科室挂号的数据
let workData = ref({})
// 存储排班日期
let workTime = ref<any>({})
// 存储排班医生的数据
let docArr = ref<any>([])
onMounted(() => {
    fetchWorkData()
})
//  获取挂号的数据
const fetchWorkData = async () => {
    let result = await reqHospitalWork(pageNo.value, limit.value, $route.query.hoscode, $route.query.depcode)
    if (result.code == 200) {
        workData.value = result.data
        // 存储第一天的数据
        workTime.value = workData.value.bookingScheduleList[0]
        getDoctorWorkData()
    }
}
// 获取某一天医生排班的数据
const getDoctorWorkData = async () => {
    let hoscode = $route.query.hoscode
    let depcode = $route.query.depcode
    let workDate = workTime.value.workDate
    let result = await reqHospitalDoctor(hoscode, depcode, workDate)
    if (result.code == 200) {
        docArr.value = result.data
    }

}
// 点击日期触发的回调
const changeTime = (item: any) => {
    // 存储用户选择那一天的数据
    workTime.value = item
    getDoctorWorkData()
}

// 计算出上午排班的医生数据
let moringArr = computed(() => {
    return docArr.value.filter((doc: any) => {
        return doc.workTime == 0
    })
})

// 计算出下午排班的医生数据
let afterArr = computed(() => {
    return docArr.value.filter((doc: any) => {
        return doc.workTime == 1
    })
})

// 路由跳转选择就诊人页面按钮的回调
const goStep2 = (doctor: any) => {
    $router.push({ path: '/hospital/register_step2', query: { docId: doctor.id } })
}
</script>

<style scoped lang="scss">
.wrap {
    .top {
        display: flex;
        color: #7f7f7f;

        .line {
            width: 5px;
            height: 20px;
            background: skyblue;
            margin: 0px 5px;
        }

        .dot {
            margin: 0px 5px;
            color: skyblue;
        }
    }

    .center {
        margin: 20px 0px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .time {
            font-weight: 900;
        }

        .container {
            width: 100%;
            display: flex;
            margin: 30px 0px;

            .item {
                flex: 1;
                width: 100%;
                border: 1px solid skyblue;
                margin: 0px 10px;
                transition: all 0.3s;

                &.active {
                    border: 1px solid #ccc;
                    color: #7f7f7f;

                    .top1 {
                        background: #ccc;
                    }
                }

                &.cur {
                    transform: scale(1.1);
                }

                .top1 {
                    background: #e8f2ff;
                    height: 30px;
                    width: 100%;
                    text-align: center;
                    line-height: 30px;
                }

                .bottom {
                    width: 100%;
                    height: 60px;
                    text-align: center;
                    line-height: 60px;
                }
            }
        }
    }

    .bottom {
        .will {
            text-align: center;
            font-size: 30px;
            font-weight: 900;

            .time {
                color: red;
            }

            .willText {
                color: skyblue;
            }
        }

        .doctor {
            .moring {
                .tip {
                    display: flex;
                    align-items: center;

                    .text {
                        color: #7f7f7f;
                        font-weight: 900;
                    }
                }

                .doc_info {
                    display: flex;
                    justify-content: space-between;
                    margin: 10px 0px;
                    border-bottom: 1px solid #ccc;

                    .left {
                        .info {
                            color: skyblue;
                            margin: 10px 0px;

                            span {
                                margin: 0px 5px;
                                font-size: 18px;
                                font-weight: 900;
                            }
                        }

                        .skill {
                            margin: 10px 0px;
                            color: #7f7f7f;
                        }
                    }

                    .right {
                        width: 150px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .money {
                            color: #7f7f7f;
                            font-weight: 900;
                        }
                    }
                }
            }
        }
    }
}
</style>